<template>
  <div>

    <Header />
    <Alsearch />
    <div class="top">
      <div class="top-left">
        <img src="../assets/011.png" alt="" />
        <div>
          <p>上新</p>
          <p>今日上新624件</p>
        </div>
        <img src="../assets/2.svg" alt="" />
      </div>
      <div class="top-right">
        <img src="../assets/012.png" alt="" />
        <div>
          <p>特价</p>
          <p>1折起</p>
        </div>
        <img src="../assets/2.svg" alt="" />
      </div>
    </div>

    <shopplist/>
    <!-- <Footernav /> -->
   <Footer class="footer"/>
  </div>
</template>

<script>
// import Footernav from "./footernav.vue";
import Alsearch from "./alsearch.vue";
import shopplist from "./shopplist.vue";
import Header from './header.vue';
import Footer from './Footer.vue';
export default {
  name: "apparel",
  components: {
    Footer,
    // Footernav,
    Alsearch,
    shopplist,
    Header,
  },
};
</script>

<style scoped>
.footer{
  position: fixed;
  bottom: 0;
  left: 0;
}
.top {
  width: 90%;
  margin: 0 auto;
  display: flex;
  border-bottom: 2px solid #f9f9f9;
}
.top > div {
  width: 50%;
  display: flex;
  height: 0.5rem;
  justify-content: space-between;
}
.top-left > img,
.top-right > img {
  width: 0.3rem;
  height: 0.3rem;
  vertical-align: middle;
  margin-top: 0.1rem;
}
.top-left {
  border-right: 2px solid #f9f9f9;
}
.top-left > div {
  height: 0.5rem;
}
.top-left > div > p:nth-child(1),
.top-right > div > p:nth-child(1) {
  margin-top: 0.05rem;
  font-size: 0.18rem;
  font-weight: 900;
}
.top-left > div > p:nth-child(2),
.top-right > div > p:nth-child(2) {
  font-size: 0.14rem;
}
.top-right > div {
  width: 0.9rem;
}
</style>

